JavaScript-koodin laatuportit: Pre-commit Hookien konfiguroinnin hallinta

Jatkuvasti kehittyvässä ohjelmistokehityksen maailmassa korkean koodinlaadun ylläpitäminen on ensisijaisen tärkeää. Puhdas, hyvin muotoiltu ja virheetön koodi ei ainoastaan vähennä ylläpitokustannuksia, vaan myös edistää yhteistyötä ja nopeuttaa kehityssyklejä. Yksi tehokas tekniikka koodin laadun varmistamiseksi on koodin laatuporttien käyttöönotto pre-commit hookien avulla. Tämä artikkeli tarjoaa kattavan oppaan pre-commit hookien konfigurointiin JavaScript-projekteissa, mikä mahdollistaa koodin laatutarkistusten automatisoinnin jo ennen kuin koodi edes pääsee versionhallintaan.

Mitä ovat Pre-commit Hookit?

Git hookit ovat skriptejä, jotka Git suorittaa ennen tai jälkeen tiettyjen tapahtumien, kuten commit, push ja receive. Pre-commit hookit ajetaan erityisesti ennen kuin commit-toiminto viedään loppuun. Ne tarjoavat kriittisen tilaisuuden tarkastaa commitoitavat muutokset ja estää sellaiset commitit, jotka eivät täytä ennalta määriteltyjä laatuvaatimuksia. Voit ajatella niitä portinvartijoina, jotka estävät heikkolaatuisen koodin pääsyn koodikantaasi.

Miksi käyttää Pre-commit Hookeja JavaScript-koodin laadun varmistamiseen?

• Varhainen virheiden havaitseminen: Pre-commit hookit havaitsevat koodin laatuongelmat varhaisessa vaiheessa kehitysprosessia, estäen niiden leviämisen eteenpäin. Tämä on paljon tehokkaampaa kuin ongelmien löytäminen koodikatselmoinneissa tai, vielä pahempaa, tuotannossa.
• Automaattinen koodin formatointi: Varmista yhtenäinen koodityyli koko tiimissäsi ja projektissasi. Automaattinen formatointi estää tyylikeskustelut ja edistää luettavampaa koodikantaa.
• Vähentynyt koodikatselmoinnin taakka: Pakottamalla koodausstandardit automaattisesti, pre-commit hookit vähentävät koodikatselmoijien taakkaa, jolloin he voivat keskittyä arkkitehtonisiin päätöksiin ja monimutkaiseen logiikkaan.
• Parantunut koodin ylläpidettävyys: Yhtenäinen ja laadukas koodikanta on helpompi ylläpitää ja kehittää ajan myötä.
• Yhdenmukaisuuden pakottaminen: Ne varmistavat, että kaikki koodi noudattaa projektin standardeja riippumatta siitä, kuka kehittäjä sen on kirjoittanut. Tämä on erityisen tärkeää hajautetuissa tiimeissä, jotka työskentelevät eri paikoista – esimerkiksi Lontoosta, Tokiosta ja Buenos Airesista – joissa yksilölliset koodaustyylit saattavat vaihdella.

Keskeiset työkalut JavaScript-koodin laatuun

Useita työkaluja käytetään yleisesti yhdessä pre-commit hookien kanssa JavaScript-koodin laatutarkistusten automatisoimiseksi:

• ESLint: Tehokas JavaScript-linteri, joka tunnistaa potentiaalisia virheitä, pakottaa koodaustyylejä ja auttaa parantamaan koodin luettavuutta. Se tukee laajaa valikoimaa sääntöjä ja on erittäin konfiguroitavissa.
• Prettier: Mielipidejohtoinen koodin formatointityökalu, joka muotoilee koodin automaattisesti noudattamaan yhtenäistä tyyliä. Se tukee JavaScriptiä, TypeScriptiä, JSX:ää ja monia muita kieliä.
• Husky: Työkalu, joka helpottaa Git hookien hallintaa. Sen avulla voit määrittää skriptejä, jotka suoritetaan Git-työnkulun eri vaiheissa.
• lint-staged: Työkalu, joka ajaa linterit ja formatoijat ainoastaan 'staged'-tilassa oleville tiedostoille, mikä nopeuttaa pre-commit-prosessia merkittävästi. Tämä estää tarpeettomat tarkistukset muuttumattomille tiedostoille.

Pre-commit Hookien konfigurointi: Vaiheittainen opas

Tässä on yksityiskohtainen opas pre-commit hookien asentamiseen JavaScript-projektiisi käyttämällä Huskya ja lint-stagedia:

Vaihe 1: Asenna riippuvuudet

Asenna ensin tarvittavat paketit kehitysriippuvuuksiksi käyttämällä npm:ää tai yarnia:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Tai yarnilla:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Vaihe 2: Alusta Husky

Husky yksinkertaistaa Git hookien hallintaprosessia. Alusta se seuraavalla komennolla:

            npx husky install
            

              
                Copy
              
            
          

Tämä luo projektiisi `.husky`-kansion, johon Git hookisi tallennetaan.

Vaihe 3: Konfiguroi Pre-commit Hook

Lisää pre-commit hook Huskyn avulla:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

Tämä komento luo `pre-commit`-tiedoston `.husky`-kansioon ja lisää siihen komennon `npx lint-staged`. Tämä kertoo Gitille, että lint-staged ajetaan ennen jokaista committia.

Vaihe 4: Konfiguroi lint-staged

lint-staged mahdollistaa linterien ja formatoijien ajamisen ainoastaan 'staged'-tilassa oleville tiedostoille, mikä nopeuttaa merkittävästi pre-commit-prosessia. Luo `lint-staged.config.js` (tai `lint-staged.config.mjs` ES-moduuleille) -tiedosto projektisi juureen ja konfiguroi se seuraavasti:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Tämä konfiguraatio käskee lint-stagedia ajamaan ESLintin ja Prettierin kaikille 'staged'-tilassa oleville JavaScript- ja TypeScript-tiedostoille. `--fix`-lippu ESLintissä korjaa automaattisesti kaikki linttausvirheet, jotka voidaan korjata automaattisesti, ja `--write`-lippu Prettierissä formatoi tiedostot ja korvaa ne formatoidulla koodilla.

Vaihtoehtoisesti voit määrittää konfiguraation suoraan `package.json`-tiedostossasi:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

Vaihe 5: Konfiguroi ESLint

Jos et ole vielä tehnyt niin, konfiguroi ESLint projektillesi. Voit luoda ESLint-konfiguraatiotiedoston seuraavalla komennolla:

            npx eslint --init
            

              
                Copy
              
            
          

Tämä opastaa sinut luomaan ESLint-konfiguraatiotiedoston (`.eslintrc.js`, `.eslintrc.json` tai `.eslintrc.yml`) projektisi vaatimusten mukaisesti. Voit valita useista ennalta määritellyistä konfiguraatioista tai luoda omat mukautetut sääntösi.

Esimerkki `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

Tämä konfiguraatio laajentaa suositeltuja ESLint-sääntöjä, suositeltuja React-sääntöjä, suositeltuja TypeScript-sääntöjä ja integroituu Prettierin kanssa. Se myös poistaa käytöstä `react/prop-types`-säännön ja asettaa `no-unused-vars`-säännön varoitukseksi.

Vaihe 6: Konfiguroi Prettier

Konfiguroi Prettier luomalla `.prettierrc.js` (tai `.prettierrc.json`, `.prettierrc.yml` tai `.prettierrc.toml`) -tiedosto projektisi juureen. Voit mukauttaa Prettierin formatointiasetuksia vastaamaan projektisi tyyliohjeita.

Esimerkki `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

Tämä konfiguraatio asettaa Prettierin käyttämään yksinkertaisia lainausmerkkejä, ei puolipisteitä, perässä tulevia pilkkuja, 120 merkin rivinleveyttä ja 2 välilyönnin sisennystä.

Vaihtoehtoisesti voit määrittää Prettier-konfiguraation `package.json`-tiedoston sisällä:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Vaihe 7: Testaa konfiguraatiosi

Testataksesi konfiguraatiotasi, tee muutoksia, lisää ne 'stage'-tilaan ja yritä commitoida ne. Esimerkiksi:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Jos tiedostoissa on linttaus- tai formatointiongelmia, ESLint ja Prettier korjaavat ne automaattisesti (jos mahdollista) tai ilmoittavat virheistä. Jos virheitä ilmenee, commit-toiminto keskeytetään, jolloin voit korjata ongelmat ennen uutta yritystä.

Edistyneet konfigurointivaihtoehdot

Eri linterien ja formatoijien käyttäminen

Voit helposti integroida muita lintereitä ja formatoijia pre-commit hook -konfiguraatioosi. Voit esimerkiksi käyttää Stylelintiä CSS- tai SASS-tiedostojen linttaamiseen:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Päivitä sitten `lint-staged.config.js`-tiedostosi sisältämään Stylelintin:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Testien ajaminen ennen committia

Voit myös ajaa yksikkötestisi osana pre-commit hookia. Tämä auttaa varmistamaan, että koodisi toimii oikein ennen sen commitoimista. Olettaen, että käytät Jestiä:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Päivitä `lint-staged.config.js`-tiedostosi sisältämään testikomennon:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

`--findRelatedTests`-lippu käskee Jestiä ajamaan ainoastaan testit, jotka liittyvät muutettuihin tiedostoihin, mikä nopeuttaa prosessia merkittävästi.

Pre-commit Hookien ohittaminen

Joissakin tapauksissa saatat haluta väliaikaisesti ohittaa pre-commit hookit. Voit tehdä tämän käyttämällä `--no-verify`-lippua `git commit` -komennon kanssa:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

On kuitenkin yleisesti suositeltavaa välttää hookien ohittamista, ellei se ole ehdottoman välttämätöntä, sillä niillä on keskeinen rooli koodin laadun ylläpitämisessä.

Yleisten ongelmien vianmääritys

• Hookit eivät toimi: Varmista, että Husky on asennettu ja alustettu oikein ja että `.husky`-kansio on olemassa projektisi juuressa. Varmista myös, että `.husky`-kansion `pre-commit`-tiedosto on suoritettava.
• Linttausvirheitä ei korjata: Varmista, että `--fix`-lippua käytetään ESLintin kanssa ja että ESLint-konfiguraatiosi on asetettu korjaamaan tietyntyyppiset virheet automaattisesti.
• Prettier ei formatoi tiedostoja: Varmista, että `--write`-lippua käytetään Prettierin kanssa ja että Prettier-konfiguraatiosi on asetettu oikein.
• Hitaat pre-commit hookit: Käytä lint-stagedia ajaaksesi linterit ja formatoijat ainoastaan 'staged'-tilassa oleville tiedostoille. Harkitse myös ESLint- ja Prettier-konfiguraatioidesi optimointia tarkistettavien sääntöjen ja asetusten määrän minimoimiseksi.
• Ristiriitaiset konfiguraatiot: Varmista, että ESLint- ja Prettier-konfiguraatiosi eivät ole ristiriidassa keskenään. Jos ovat, saatat joutua säätämään toista tai molempia konfiguraatioita ristiriitojen ratkaisemiseksi. Harkitse jaetun konfiguraation, kuten `eslint-config-prettier` ja `eslint-plugin-prettier`, käyttöä ristiriitojen välttämiseksi.

Parhaat käytännöt Pre-commit Hookeille

• Pidä hookit nopeina: Hitaat hookit voivat merkittävästi vaikuttaa kehittäjien tuottavuuteen. Käytä lint-stagedia käsittelemään vain 'staged'-tilassa olevia tiedostoja ja optimoi linteri- ja formatoijakonfiguraatiosi.
• Tarjoa selkeät virheilmoitukset: Kun hook epäonnistuu, anna selkeät ja informatiiviset virheilmoitukset opastaaksesi kehittäjiä ongelmien korjaamisessa.
• Automatisoi niin paljon kuin mahdollista: Automatisoi koodin formatointi ja linttaus minimoidaksesi manuaalisen työn ja varmistaaksesi yhdenmukaisuuden.
• Kouluta tiimisi: Varmista, että kaikki tiimin jäsenet ymmärtävät pre-commit hookien tarkoituksen ja kuinka niitä käytetään tehokkaasti.
• Käytä yhtenäistä konfiguraatiota: Ylläpidä yhtenäistä konfiguraatiota ESLintille, Prettierille ja muille työkaluille koko projektissasi. Tämä auttaa varmistamaan, että kaikki koodi formatoidaan ja lintataan samalla tavalla. Harkitse jaetun konfiguraatiopaketin käyttöä, joka voidaan helposti asentaa ja päivittää useisiin projekteihin.
• Testaa hookisi: Testaa säännöllisesti pre-commit hookejasi varmistaaksesi, että ne toimivat oikein ja etteivät ne aiheuta odottamattomia ongelmia.

Globaalit huomiot

Kun työskentelet maailmanlaajuisesti hajautetuissa tiimeissä, ota huomioon seuraavat seikat:

• Yhtenäiset työkaluversiot: Varmista, että kaikki tiimin jäsenet käyttävät samoja versioita ESLintistä, Prettieristä, Huskysta ja lint-stagedista. Tämä voidaan saavuttaa määrittämällä versiot `package.json`-tiedostossasi ja käyttämällä paketinhallintaohjelmaa, kuten npm tai yarn, riippuvuuksien asentamiseen.
• Alustojen välinen yhteensopivuus: Testaa pre-commit hookisi eri käyttöjärjestelmillä (Windows, macOS, Linux) varmistaaksesi, että ne toimivat oikein kaikilla alustoilla. Käytä alustariippumattomia työkaluja ja komentoja aina kun mahdollista.
• Aikaeroerot: Ole tietoinen aikaeroeroista kommunikoidessasi tiimin jäsenten kanssa pre-commit hook -ongelmista. Tarjoa selkeät ohjeet ja esimerkit auttaaksesi heitä ratkaisemaan ongelmat nopeasti.
• Kielituki: Jos projektisi sisältää työskentelyä useilla kielillä, varmista, että pre-commit hookisi tukevat kaikkia projektissa käytettyjä kieliä. Saatat joutua asentamaan ylimääräisiä lintereitä ja formatoijia kullekin kielelle.

Yhteenveto

Pre-commit hookien käyttöönotto on tehokas tapa valvoa koodin laatua, parantaa tiimiyhteistyötä ja vähentää ylläpitokustannuksia JavaScript-projekteissa. Integroimalla työkaluja kuten ESLint, Prettier, Husky ja lint-staged, voit automatisoida koodin formatoinnin, linttauksen ja testauksen, varmistaen että vain korkealaatuista koodia commitoitaan versionhallintaasi. Noudattamalla tässä oppaassa esitettyjä vaiheita voit pystyttää vankan koodin laatuportin, joka auttaa sinua rakentamaan puhtaampia, ylläpidettävämpiä ja luotettavampia JavaScript-sovelluksia. Ota tämä käytäntö omaksesi ja nosta tiimisi kehityksen työnkulku uudelle tasolle jo tänään.